<template>
  <div class="system-page-href">
    <div class="content">
      <div class="list">
        <div
            class="card"
            @click="clickCard(item)"
            :class="{
              'card-active': checkActive(item),
              'card-selected': item.id === selectedCard?.id
            }"
            v-for="(item, index) in systemHref"
            :key="index">
          <div class="text">
            <div class="name">{{ item.name }}</div>
            <div class="url">{{ item.url }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ILink} from "@/components/hrefSelector/types";

const props = defineProps<{
  modelValue: ILink
}>()

const emits = defineEmits<{
  (e: "click", value:{name: string, url: string}): void
}>()

// @ts-ignore
const host = window.VUE_APP_URL[import.meta.env.MODE].appHost;

const systemHref = [
  {
    name: '我的积分',
    // url: `${host}/merchant/#/merchant/tokens/tokensManage`,
    routerName: "orderIntegral",
  },
  {
    name: '会员中心',
    // url: `${host}/merchant/#/merchant/vip_center/rank_list`,
    routerName: "appMember"
  },
  {
    name: '任务列表',
    // url: `${host}/merchant/#/merchant/task_center/category`,
    routerName: "memberTaskList"
  },
  {
    name: '我的订单',
    // url: `${host}/merchant/#/mall/order/list`,
    routerName: "orderAll",
  },
  {
    name: '地址列表',
    // url: `${host}/merchant/#/mall/decorate/page`,
    routerName: "addressList",
  },
  //微信立减金单独卡券包
  {
    name: '我的券包(微信立减金)',
    // url: `${host}/merchant/#/mall/decorate/page`,
    routerName: "wechatCouponList",
  },
  //我的优惠券
  {
    name: '我的优惠券',
    // url: `${host}/merchant/#/mall/decorate/page`,
    routerName: "myCoupon",
  },
  //会员订单列表
  {
  name: '会员订单',
  // url: `${host}/merchant/#/mall/decorate/page`,
  routerName: "memberOrderList",
}
]

const checkActive = (item: { url: string, name: string }) => {
  return item.name === props.modelValue?.urlName && item.url === props.modelValue?.url
}

const selectedCard = ref();
const clickCard = (item:any) => {
  selectedCard.value = item
  emits("click", item);
}
</script>

<style scoped lang="scss">
@use "../styles/index.scss";

.card {
  width: 200px;
  border: solid 1px #eee;
  margin-right: 20px;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 12px;

  .text {
    .name {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .url {
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
}
</style>
